@font-face {
    font-family: Alimama ShuHeiTi;
    font-weight: 700;
    src: url("//at.alicdn.com/wf/webfont/NlEPWUkTowpF/D60gqy3CdsGd.woff2") format("woff2"),
    url("//at.alicdn.com/wf/webfont/NlEPWUkTowpF/M0tZ9Za7nc9F.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "Alimama FangYuan";
    font-weight: 700;
    src: url("//at.alicdn.com/wf/webfont/NlEPWUkTowpF/T5aFIhUArZIs.woff2") format("woff2"),
    url("//at.alicdn.com/wf/webfont/NlEPWUkTowpF/Bg9K3ob187u0.woff") format("woff");
    font-display: swap;
}

.banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--banner-height);
    inset: 0;
    margin: 0 auto;
    padding: var(--edge-tb) var(--edge-lr) var(--content-top);
    transition: all 1s var(--animation-on);
    background-image: url("@/assets/theme/modal_bg.png");
}

[theme=light] .banner {
    --gradient-from: #ebf2ff;
    --gradient-to: #fff;
    --gradient-stops: var(--gradient-from), var(--gradient-to);
}

body.page .site-header {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    inset: 0;
    object-fit: cover;
    object-position: 65%;
    background-position: 65%;
    -webkit-mask: linear-gradient(#000 70%, #0000);
    animation: none;
}

.about-title {
    z-index: 2;
    position: relative;
    text-shadow: 0 1px 5px rgb(0 0 0 / 30%);
    width: 100%;
    font-size: max((40vw - var(--edge-lr) * 2) / 14, 1rem);
    margin: auto 0;
    animation: about-title 1.5s var(--animation-in) 2s, opacity 1s var(--animation-in) 2s backwards;
    text-align: center;
    font-weight: 400;
    font-family: var(--font-family-slogn),sans-serif;
}

.about-title p {
    display: inline-block;
    color: transparent;
    background-clip: text;
    margin: 0.5em auto;
}

.about-title .title-header {
    font-family: var(--font-family-slogn),sans-serif;
}

.about-title .part-1 {
    --tw-gradient-to: #ed6336;
    --tw-gradient-from: #00a4ff;
    --tw-gradient-stops: var(--tw-gradient-from), #d5c98c, var(--tw-gradient-to);
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.about-title .part-2 {
    --title-gradient-from: #1e5ab4;
    --title-gradient-to: #494646;
    --title-gradient-stops: var(--title-gradient-from), var(--title-gradient-to);
    background-image: linear-gradient(to right, var(--title-gradient-stops));
}
.about-title .part-3, .about-title .part-4{
    font-size: 2rem;
}
.about-title .part-3 {
    --tw-gradient-from: #3055fe;
    --tw-gradient-to: #0bd9ed;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.about-title .part-4 {
    margin-left: 0.75rem;
    --tw-gradient-from: #f72d7b;
    --tw-gradient-to: #ffbb23;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.hentry {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-divs);
    margin: 0;
    list-style: none;
    animation-delay: 2s;
}

.hentry > * {
    --duration: 1s;
    font-size: var(--font-size-medium);
    min-height: 10rem;
    background: rgb(255 255 255 / 10%);
    border-radius: var(--radius);
    padding: var(--gap-divs);
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    gap: var(--gap-divs);
    box-shadow: var(--box-shadow);
    flex: auto;
    position: relative;
    overflow: hidden;
    transition: all 1s, box-shadow .5s;
}

.hentry > *:hover {
    box-shadow: var(--box-shadow-white), 0 0 0 2px rgb(255 255 255 / 40%);
}

.site-main h5 {
    width: 100%;
    z-index: 2;
    font-size: var(--font-size-normal);
    text-transform: uppercase;
}

.site-main h5:after {
    content: attr(title);
    float: right;
    opacity: .2;
}

.site-main span {
    display: block;
    font-size: .7rem;
}

.site-main a::after {
    content: "\e627";
    font-family: iconfont;
    width: var(--icon-size);
    height: var(--icon-size);
    line-height: var(--icon-size);
    background: rgb(255 255 255 / .2);
    border-radius: 50%;
    text-align: center;
}

.site-main a:not(.more)[target="_blank"]::after {
    content: "\e667";
}

.site-main a.more::after {
    content: "\e645";
}

.site-main a.no-icon::after {
    display: none;
}

.site-main a:not(.no-icon):hover {
    background-size: calc(100% - var(--icon-size) - .5em) 1px;
}

.site-main :where(li) {
    flex: auto;
    z-index: 2;
}

.site-main :where(.info) {
    font-size: .5rem;
    flex: none;
    gap: var(--gap-span) var(--gap-divs);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    opacity: .6;
}

.site-main .info a {
    --color-rgb: 255 255 255;
    --color-sub-rgb: 255 255 255;
    display: flex;
    align-items: center;
    gap: .5em;
}

.wide {
    width: 100%;
}

.logo img {
    height: 1rem;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .3)) brightness(1.2);
}

.about-me {
    flex-direction: column;
    background: linear-gradient(135deg, rgb(255 255 255 / 10%), rgb(238 77 80 / 50%)) center / 200% 200%;
}

.about-me li {
    justify-content: flex-start;
    flex: none;
}

.about-me svg {
    height: var(--icon-size);
    width: var(--icon-size);
    fill: rgba(255, 255, 255, 0.5);
}

.about-me em {
    display: inline-block;
    background: rgb(255 255 255 / 10%);
    border-radius: var(--radius);
    margin: 0 .5em;
    padding: 0 .5em;
}

.about-identity {
    background: linear-gradient(135deg, rgb(255 255 255 / 10%), rgb(251 145 104 / 50%)) center / 200% 200%;
}

.about-identity:hover,
.about-me:hover {
    background-position: 200% 200%;
}

@media (max-width: 640px) {
    body {
        --banner-height: 85vh;
    }
}

@keyframes HexagonAnimation_hexagonAutomationCircle {
    0% {
        transform: scale(0)
    }

    to {
        transform: scale(6)
    }
}
